<%--
  Created by IntelliJ IDEA.
  User:JIANGlin
  Date: 2020/12/1
  Time: 20:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<title>盘点库存</title>
<head>
    <head>
        <title>库存盘点</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="${pageContext.request.contextPath}/style/layui/css/layui.css">
        <script src="${pageContext.request.contextPath}/style/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/style/jquery-2.1.0.js"></script>
    </head>
<body>
<!--数据表格-->
<h2>盘点表</h2>
<table class="layui-hide " id="panTable" lay-filter="panTable"></table>
<%--form表单--%>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">盘点人1</label>
            <div class="layui-input-inline">
                <input type="text" name="pdra" id="pdra"   lay-verify="required|pdra"  autocomplete="off"  class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">盘点人2</label>
            <div class="layui-input-inline">
                <input type="text" name="pdrb" id="pdrb"   lay-verify="required|pdrb"  autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<!--数据表格-->
<h2>库存盘点表</h2>
<table class="layui-hide " id="panTable1" lay-filter="panTable1"></table>

<!--数据表格右侧按钮组-->
<script type="text/html" id="userBar">
    <a class="layui-btn layui-btn-xs" lay-event="information">查看详情</a>
</script>
<%--入库详情信息表格--%>
<div class="layui-elem-field" style="display: none;border: 0" id="informationDiv">
    <table class="layui-hide" id="informationTable" lay-filter="informationTable"></table>
    时间：<label id="rdate"></label>
</div>
<script>
    layui.use(['table', 'layer', 'form'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var pan = [];
        var tableData = [];

        $(function () {
            extracted();
        })

        function extracted() {
        //、获取单元格中该表后的数据
            $.ajax({
                url: "${pageContext.request.contextPath}/pandian/pdQuery",
                data: {nums: 5, curr: 1},
                type: "post",
                async: false,
                success: function (r) {
                    tableData = r.data;
                }, error: function (r) {
                    //alert("ccc");
                }
            })


            table.render({
                elem: '#panTable'
                , data: tableData//数据接口
                , even: true //开启隔行背景
                , page: true //开启分页
                , cols: [[ //表头
                    {field: 'ssid', title: '设施ID'},
                    {field: 'name', title: '设施名称'}
                    , {field: 'count', title: '应有数量'}
                    , {field:'faccount', title: '实际数量', edit: 'text', templet: function (res) {
                            if (res.faccount == null || res.faccount === "") {
                                return res.count;
                            } else {
                                return res.faccount;
                            }
                        }
                    }
                    , {
                        field: 'comm', title: '备注', edit: 'text', templet: function (res) {
                            if (res.comm == null || res.comm === "") {
                                return '无';
                            } else {
                                return res.comm;
                            }
                        }
                    }
                ]]
                , limit: 5
                , limits: [5, 8, 10, 20, 50]
            });
        }
        //监听编辑单元格
        table.on('edit(panTable)', function (obj) {
            var data = obj.data;
            var oldText = $(this).prev().text();  // 单元格编辑之前的值
            var checkCount = /^[1-9]*[1-9][0-9]*$/;
            var field = obj.field; //得到字段
            if (field == 'faccount') {
                if (!checkCount.test(data.faccount)) {
                    $(this).val(oldText);
                    layer.msg("只能是正整数大哥！！！");
                }
            }
        })
        table.render({
            elem: '#panTable1'
            , url: '${pageContext.request.contextPath}/pandian/pdrId'//数据接口
            , toolbar: '#userToolbar'
            , even: true //开启隔行背景
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'id', title: 'ID',sort: true}
                , {field: 'pddate', title: '时间'}
                , {field: 'pdra', title: '盘点人1'}
                , {field: 'pdrb', title: '盘点人2'}
                , {fixed: 'right', title: '操作', toolbar: '#userBar', align: 'center'}
            ]]
            , limit: 5
            , limits: [3, 5, 8, 10, 20, 50]
        });
        form.on('submit(demo1)', function (data) {

            //layer.msg(JSON.stringify(data.field));
            //1.将获取到到的数据保存到数据库
            $.ajax({
                url: "${pageContext.request.contextPath}/pandian/pdadd",
                data: {data: JSON.stringify(data.field), panTableData: JSON.stringify(tableData)},  //当前表单里面填写的数据{name:'',name1:''}
                type: "post",
                success: function (a) {
                    if (a > 0) {
                        layer.closeAll();
                        //刷新一下table
                        $("#pdra").val("");
                        $("#pdrb").val("");
                        extracted();
                        table.reload('panTable1', {
                            page: {
                                curr: 1
                            }
                        })
                    }
                }, error: function (msg) {
                    alert("服务器错误")
                }
            })
            return false;
        });
        //监听右侧工具栏
        table.on('tool(panTable1)', function (obj) { //注：tool 是工具条事件名，userTable 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            showInformationDiv(data)
        });
        //打开订单详情弹出框
        function showInformationDiv(data) {
            var id = data.id;
            layer.open({
                type: 1,
                anim: 3,
                title: ['盘点详情', 'font-size:20px'],
                content: $("#informationDiv"),
                offset: '100px',
                area: '900px',
                success: function () {
                    $("#rdate").html(data.pddate);
                    showInformationTable(id)
                }
            })
        }

        //渲染入库单表格-showTable()
        function showInformationTable(data) {
            table.render({
                elem: '#informationTable'
                , url: '${pageContext.request.contextPath}/pandian/pdQueryId'
                , where: {id: data}
                , even: true //开启隔行背景
                , text: {
                    none: '暂无相关数据'
                }
                , cols: [[ //表头
                    {field: 'id', title: 'ID', align: 'center'}
                    , {field: 'name', title: '设施名称', align: 'center'}
                    , {field: 'sjcount', title: '实际数量', align: 'center'}
                    , {field: 'count', title: '库存数量', align: 'center'}
                    , {field: 'comm', title: '备注', align: 'center'}
                ]]
            });
        }
    });
</script>
</body>
</html>
